import React from "react";
import { Form, Input, Button, message } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import styles from "./login.module.less";

const Login = () => {
  const navigate = useNavigate();

  // 处理登录提交
  const onFinish = (values: { username: string; password: string }) => {
    console.log("登录信息:", values);
    message.success("登录成功！");
    navigate("/home"); // 登录成功跳转
  };

  return (
    <div className={styles.loginContainer}>
      <h2 className={styles.title}>用户登录</h2>
      <Form
        name="login"
        className={styles.loginForm}
        onFinish={onFinish}
        autoComplete="off"
      >
        {/* 用户名输入框 */}
        <Form.Item
          name="username"
          rules={[{ required: true, message: "请输入用户名！" }]}
        >
          <Input
            prefix={<UserOutlined />}
            placeholder="用户名"
            size="large"
          />
        </Form.Item>

        {/* 密码输入框 */}
        <Form.Item
          name="password"
          rules={[{ required: true, message: "请输入密码！" }]}
        >
          <Input.Password
            prefix={<LockOutlined />}
            placeholder="密码"
            size="large"
          />
        </Form.Item>

        {/* 登录按钮 */}
        <Form.Item>
          <Button type="primary" htmlType="submit" className={styles.loginButton} block>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;
